<template>
  <div style="margin-bottom:50px">
    <div class="video-cate">
    <div class="video-cates">
      <router-link :to="`/video/&channelId=4&feedChannelId=1067226&timestamp=${Date.now()}&offset=15`">预告片</router-link>
      <router-link :to="`/video/&channelId=4&feedChannelId=1331498&timestamp=${Date.now()}&offset=15`">新片看点</router-link>
      <router-link :to="`/video/&channelId=4&feedChannelId=1074953&timestamp=${Date.now()}&offset=15`">说电影</router-link>
      <router-link :to="`/video/&channelId=4&feedChannelId=1794454&timestamp=${Date.now()}&offset=15`">佳片推荐</router-link>
      <router-link :to="`/video/&channelId=4&feedChannelId=1150199&timestamp=${Date.now()}&offset=15`">悬疑</router-link>
      <router-link :to="`/video/&channelId=4&feedChannelId=1614507&timestamp=${Date.now()}&offset=15`">科幻</router-link>
      <router-link :to="`/video/&channelId=4&feedChannelId=1731520&timestamp=${Date.now()}&offset=15`">爱情</router-link>
      <router-link :to="`/video/&channelId=4&feedChannelId=1466543&timestamp=${Date.now()}&offset=15`">奇幻</router-link>
      <router-link :to="`/video/&channelId=4&feedChannelId=1871222&timestamp=${Date.now()}&offset=15`">热播剧</router-link>
      <router-link :to="`/video/&channelId=4&feedChannelId=1480140&timestamp=${Date.now()}&offset=15`">追星</router-link>
    </div>
  </div>
  <router-view />
  </div>
</template>

<script>
export default {
  name: 'Video',
  created () {
    this.$router.push(`/video/&channelId=4&feedChannelId=1067226&timestamp=${Date.now()}&offset=15`)
  },
  beforeRouteUpdate (from, to, next) {
    console.log({ to })
    if (to.params.id !== '&channelId=4&feedChannelId=1067226&timestamp=1605083606603&offset=15') {
      next()
    }
  }
}
</script>

<style lang="scss">
.video-cate {
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  .video-cates {
    display: flex;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: scroll;
    height: 40px;
    a {
      width: 20%;
      flex-shrink: 0;
      justify-content: space-around;
      text-align: center;
      color: black;
    }
  }
}
</style>
